DAY09 - [CSS] 頁籤與其他小事

13th鐵人賽

joannachen

2021-09-09 23:06:54

1416 瀏覽

分享至

今日文章目錄

頁籤應用情境

事前準備

CSS練習

參考資料

頁籤應用情境

頁籤不管是在小尺寸或大螢幕上，都是時常看到的必備零件！今天來練習一下吧！
練習範例參考：

圖片參考來源

事前準備

這次練習內容會使用 <input type="radio" /> 搭配 CSS選取器 :checked 達到切換頁籤的效果。
特別注意：畫面上input會顯藏，使用者是點擊label。
- <input id="myTab"> 的myTab 要對應到 <label for="myTab">，確保之後點擊label才會選取到。
- 每個頁籤會對應到一個radio，記得每個radio的name要一致(<input name="panelCtrl">)，這樣才會對應到同組單選。
HTML 架構：

<section class="mainTab">
    <div class="container">
        <input type="radio" name="panelCtrl" id="tab1" checked>
        <input type="radio" name="panelCtrl" id="tab2">
        <input type="radio" name="panelCtrl" id="tab3">

        <div class="tabPanel">
            <label for="tab1" class="tab tab1">頁籤1</label>
            <label for="tab2" class="tab tab2">頁籤2</label>
            <label for="tab3" class="tab tab3">頁籤3</label>
        </div>
        
        <div class="contentGroup">
            <div class="content content1">
               <!-- 頁籤1 內容 -->
            </div>
            <div class="content content2">
               <!-- 頁籤2 內容 -->
            </div>
            <div class="content content3">
               <!-- 頁籤3 內容 -->
            </div>
        </div>
        
    </div>
</section>

CSS重點

留意HTML結構中，input層級同.tabPanel與contentGroup。目的是當radio選取時，我可以同時操作頁籤與頁籤內容。
我使用到 ~：表示選取後方同層所有指定對象。以下方CSS為例：
- #tab1:checked ~ .contentGroup .content1 :
  當radio選取時，後方 .contentGroup內.content1 動作。
- #tab1:checked ~ .tabPanel .tab1 :
  當radio選取時，後方 .tabPanel內 .tabPanel動作。

    .contentGroup .content{
        display: none;
    }
    #tab1:checked ~ .contentGroup .content1,
    #tab2:checked ~ .contentGroup .content2,
    #tab3:checked ~ .contentGroup .content3{
        display: block;
    }
    #tab1:checked ~ .tabPanel .tab1,
    #tab2:checked ~ .tabPanel .tab2,
    #tab3:checked ~ .tabPanel .tab3{
        border-bottom: 4px solid gray;
    }
    #tab1,
    #tab2,
    #tab3{
        display: none;
    }